<template>
  <div class="app-container home">
    <query-panel
      :form-data="queryParams"
      @handleQuery="init"
      label-width="100px"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="产品名称：" prop="nodeName">
            <el-input v-model="queryParams.nodeName" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参数名称：" prop="parameterName">
            <el-input
              v-model="queryParams.parameterName"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参数类型：" prop="parameterType">
            <el-input
              v-model="queryParams.parameterType"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="参数值：" prop="parameterValue">
            <el-input
              v-model="queryParams.parameterValue"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-col>
        <el-button
          size="mini"
          type="primary"
          class="tableAdd"
          @click="importOpen = true"
        >
          导入
        </el-button>
      </el-row>
    </query-panel>
    <!-- <form ref='file-upload-form' style="display: flex;
    justify-content: flex-end;
    margin-bottom: 19px;">
       

        <el-button
          size="mini"
          type="primary"
          class="tableAdd"
          @click="importOpen=true"
        >
          导入
        </el-button>
        </form> -->
    <el-table v-loading="loading" :data="tableData" style="width: 100%">
      <el-table-column prop="nodeName" label="产品名称"> </el-table-column>
      <el-table-column prop="parameterType" label="参数类型"> </el-table-column>
      <el-table-column prop="parameterName" label="参数名称"> </el-table-column>
      <el-table-column prop="parameterValue" label="参数值"> </el-table-column>
    </el-table>

    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total,->, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      title="上传文件"
      :visible.sync="importOpen"
      width="400px"
      append-to-body
      :destroy-on-close="true"
    >
      <div class="fileParBox">
        <div>上传文件</div>
        <input id="file-upload" type="file" @change="handleFileUpload" />
        <!-- <template-window :form-data="formData" :template-type="templateType" /> -->
      </div>
      <div v-if="file && file.name">{{ file.name }}</div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          size="mini"
          class="tableAdd"
          :disabled="!file"
          @click="outImport"
        >
          确定
        </el-button>
        <el-button
          class="dialogCancel"
          type="primary"
          size="mini"
          @click="
            importOpen = false;
            file = null;
          "
          >关闭</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSysProductParameterList, importSysProductParameter } from "@/api/ProductExport"
import axios from 'axios'
import Cookies from "js-cookie";
import QueryPanel from "@/components/QueryPanel/index.vue";
export default {
  components: { QueryPanel },
  data() {
    return {
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      loading: false,
      file: null,
      importOpen: false,
      queryParams: {
        nodeName: '',
        parameterName: '',
        parameterType: '',
        parameterValue: ''
      }
    }

  },
  created() {
    this.init()
  },
  methods: {
    // 初始数据请求
    init() {
      let param = {
        pageSize: this.pageSize,
        pageNum: this.currentPage,
        ...this.queryParams
      }
      console.log('param', param);
      this.loading = true
      getSysProductParameterList(param).then(res => {
        console.log('res.data', res.code, res.rows);
        if (res.code == 200) {

          this.tableData = res.rows
          this.total = res.total
        } else {
          this.tableData = []
        }
        this.loading = false
      })

      // console.log('data',data);
    },
    async outImport() {
      this.loading = true
      const formData = new FormData();
      console.log('file', this.file);
      formData.append('file', this.file);
      console.log('formData', formData);
      try {
        const response = await axios.post(process.env.VUE_APP_BASE_API + '/system/sysProductParameter/importData', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
            'Authorization': Cookies.get('Admin-Token')
          }
        });
        if (response.data.code == 200) {
          console.log('response', response);
          this.$message.success('成功导入数据~');
          this.importOpen = false
          this.file = null
        } else {
          this.$message({
            message: response.data.msg,
            type: 'error'
          });
        }
        this.loading = false
      } catch (error) {
        console.log('error', error);
        this.loading = false
      }
    },
    handleSizeChange(data) {
      this.pageSize = data
      this.init()
    },
    handleCurrentChange(data) {
      this.currentPage = data
      this.init()
    },
    handleFileUpload({ target }) {
      this.file = target.files[0];
    },
    importOpenHand() {

    }

  },


}
</script>

<style lang='scss' scoped>
::v-deep .el-pagination__total {
  font-size: 14px;
  color: #00000099;
}
::v-deep .el-pagination {
  .el-select .el-input {
    .el-input__inner {
      width: 90px;
      height: 32px;
      border-color: #dcdcdc;
      color: #000000e6;
      font-size: 14px;
      &:hover {
        border-color: #dcdcdc;
      }
    }
    .el-input__suffix {
      right: 12px;
      .el-select__caret {
        color: #000000e6;
        font-weight: 600;
      }
    }
  }
  .btn-prev,
  .btn-next {
    background-color: #fff;
  }
  .btn-next {
    color: #000000e6;
  }
  .el-pager {
    li {
      width: 32px;
      height: 32px;
      border-radius: 3px;
      background-color: #fff;
      border: 1px solid #dcdcdc;
      line-height: 32px;
      color: #00000099;
      &:not(.disabled):hover {
        color: #00000099;
      }
      &:not(.disabled).active {
        background-color: #971111;
        border-color: #971111;
        &:hover {
          color: #fff;
        }
      }
    }
  }
  .el-pagination__jump {
    color: #000000e6;
    font-size: 14px;
    .el-input__inner {
      width: 48px;
      height: 32px;
      font-size: 14px;
      color: #000000e6;
      border-color: #dcdcdc;
    }
  }
}
.fileParBox {
  position: relative;
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: #dedede;
  text-align: center;
  border-radius: 10px;
}

#file-upload {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
</style>